<script setup>
import { ref, onMounted, defineProps, watch } from "vue";
import { useRouter } from "vue-router";
import api from "@/api/api.js";

const router = useRouter();
const props = defineProps({
  keywords: String,
  data_list: Array,
});

watch(
  () => props.data_list,
  (newValue, oldValue) => {
    enroll_list.value = newValue;
  },
  {
    deep: true,
  }
);

//获取我的报名
const pageNum = ref(1);
const pageSize = ref(10);
const keywords = ref(props.keywords || "");
const total = ref(0);
const get_myEnroll = async () => {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    keywords: keywords.value,
  };
  try {
    const res = await api.getMyEnroll(params);
    enroll_list.value = res.data;
    total.value = res.total;
    // console.log(res);
  } catch (err) {
    console.error(err);
    loading.value = false;
  }
};

//list参数
const enroll_list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  loading.value = true;
  get_myEnroll().then((res) => {
    loading.value = false;
    if (enroll_list.value.length >= total.value) {
      loading.value = false;
      finished.value = true;
    }
    pageNum.value++;
  });
};

const goActivity = (path, id) => {
  router.push({
    path: path ? path : "/detail",
    query: {
      id,
    },
  });
};

onMounted(async () => {
  await get_myEnroll();
});
</script>

<template>
  <div class="enrolllist-container">
    <header>我的报名</header>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
      @load="onLoad">
      <div class="container" v-for="(item, idnex) in enroll_list" :key="item.id">
        <div class="img-box">
          <img :src="item.cover" alt="" />
        </div>
        <footer>
          <div class="left">
            <p class="title">{{ item.title }}</p>
            <p class="date">{{ item.startTime }}-{{ item.endTime }}</p>
          </div>
          <div class="right" @click="goActivity(item.path, item.id)">
            进入活动
          </div>
        </footer>
      </div>
    </van-list>
  </div>

  <div style="height: 100px"></div>
</template>

<style scoped lang="less">
@import url("@/styles/components/home/ActivityList");

.enrolllist-container {
  padding: 25px 15px;

  header {
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
